import './App.css';


import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'

let Index = lazy(() => import('./views/Index'))
let Login = lazy(() => import('./views/Login'))
let Register = lazy(() => import('./views/Register'))
let Search = lazy(() => import('./views/Search'))
let NotFound = lazy(() => import('./views/NotFound'))

class App extends Component {
  render() {
    return (
      <div className='app'>
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/search" component={Search} />
            <Redirect exact from='/' to="/index" />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;